<script setup lang="ts">
import { reactive } from 'vue'
import { ElIcon, ElImage } from 'element-plus'
import { ElementPlus } from '@element-plus/icons-vue'
import taffeLogo from '@/assets/logo/taffe.png'
import taffeProjectLogo from '@/assets/logo/taffeproject.png'
import taffeRepairLogo from '@/assets/logo/tafferepair.png'
import taffeSchoolLogo from '@/assets/logo/taffeschool.png'
import taffeBookLogo from '@/assets/logo/taffebook.png'
import eipLogo from '@/assets/logo/eip.png'
import pptLogo from '@/assets/logo/ppt.png'

const state = reactive({
  list1: [
    {
      name: '流程管理平台',
      icon: '',
      png: taffeLogo,
      link: 'http://www.sytton.top:8001',
    },
    {
      name: '设备报修系统',
      icon: '',
      png: taffeRepairLogo,
      link: 'http://www.sytton.top:8002',
    },
    {
      name: '项目管理平台',
      icon: '',
      png: taffeProjectLogo,
      link: 'http://www.sytton.top:8003',
    },
    {
      name: '学工教务平台',
      icon: '',
      png: taffeSchoolLogo,
      link: 'http://www.sytton.top:8004',
    },
    {
      name: 'PPT智能助手',
      icon: '',
      png: pptLogo,
      link: 'http://www.sytton.top:5809',
    },
    {
      name: '智慧校园',
      icon: '',
      png: eipLogo,
      link: 'http://www.sytton.top:8090',
    },
    {
      name: '鲸习湾',
      icon: '',
      png: taffeBookLogo,
      link: 'http://www.sytton.top:5801',
    },
    {
      name: '职业道德教育',
      icon: '',
    },
    {
      name: '职业道德教育',
      icon: '',
    },
  ],
  list2: [
    {
      name: '职业道德教育',
      icon: '',
    },
    {
      name: '职业道德教育',
      icon: '',
    },
    {
      name: '职业道德教育',
      icon: '',
    },
  ],
  list3: [
    {
      name: '职业道德教育',
      icon: '',
    },
    {
      name: '职业道德教育',
      icon: '',
    },
    {
      name: '职业道德教育',
      icon: '',
    },
    {
      name: '职业道德教育',
      icon: '',
    },
  ],
})

const onOpen = (link: any) => {
  if (link) {
    debugger
    console.log(link)
    window.open(link, '_target')
  }
}
</script>

<template>
  <div class="recommend">
    <label>官方推荐</label>
    <div class="content">
      <div class="left card">
        <label>学工部</label>
        <div class="item-wrap">
          <div v-for="item in state.list1" class="item big" @click="onOpen(item.link)">
            <template v-if="item.png">
              <el-image :src="item.png" fit="cover" style="width: 40px"> </el-image>
            </template>
            <el-icon v-else><ElementPlus /></el-icon>
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="right">
        <div class="up card">
          <label>宣传部</label>
          <div class="item-wrap">
            <div v-for="item in state.list2" class="item">
              <el-icon><ElementPlus /></el-icon>
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="down card">
          <label>就业部门</label>
          <div class="item-wrap">
            <div v-for="item in state.list3" class="item">
              <el-icon><ElementPlus /></el-icon>
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.recommend {
  label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .content {
    display: flex;
    gap: 20px;
    .left {
      padding: 15px;
      background: #dfd9cb;
      min-height: 300px;
      width: 530px;
      border-radius: 10px;
    }
    .right {
      min-height: 300px;
      width: 440px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .card {
      padding: 15px;
      background: #dfd9cb;
      min-height: 100px;
      border-radius: 10px;
    }
    .item-wrap {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      .item {
        cursor: pointer;
        width: 130px;
        background: #ffffff;
        padding: 15px;
        border-radius: 10px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        &.big {
          width: 160px;
        }
      }
    }
  }
}
</style>
